<template>
  <div class="change-pw">
    <div class="tabs-header">
      <!-- 修改出入金密码 -->
      <div
        class="tab"
        :class="{'active': tabActive === 1}"
        @click="switchTab(1)"
      >{{$t('trade.psw')}}</div>
      <!-- 下单设置 -->
      <div
        class="tab"
        :class="{'active': tabActive === 2}"
        @click="switchTab(2)"
      >{{$t('trade.orderSet')}}</div>
      <div
              class="tab"
              :class="{'active': tabActive === 3}"
              @click="switchTab(3)"
      >{{$t('trade.heyueSet')}}</div>
    </div>
    <div class="tabs-content">
      <div class="tab1" v-show="tabActive === 1">
        <i-form class="pwd-form" :label-width="80">
          <!-- 原密码 -->
          <FormItem :label="$t('trade.opw')">
            <i-input type="password" :placeholder="$t('tip.inputopw')" v-model="oldPw" />
          </FormItem>
          <!-- 新密码 -->
          <FormItem :label="$t('trade.npw')">
            <i-input type="password" :placeholder="$t('tip.inputnpw')" v-model="newPw" />
          </FormItem>
          <!-- 再次输入新密码 -->
          <FormItem :label="$t('trade.cpw')">
            <i-input type="password" :placeholder="$t('tip.inputcpw')" v-model="rNewPw" />
          </FormItem>
          <!-- 提交 -->
          <div class="form-submit">
            <i-button type="primary" @click="submitChangePw">{{$t('trade.confirm')}}</i-button>
          </div>
        </i-form>
      </div>
      <div class="tab2" v-show="tabActive === 2">
        <div class="order-set">
          <div class="set-item">
            <el-checkbox v-model="delogVal" @change="delogSetting">{{$t("trade.orderTips")}}</el-checkbox>
          </div>
          <!--<div class="set-item">
            <el-checkbox v-model="dbVal" @change="dbClickSetting">{{$t("trade.dbClose")}}</el-checkbox>
          </div>-->
        </div>
      </div>
      <div class="tab3" v-show="tabActive === 3">
        <div class="heyue-set">
          <div class="table-tit" ref="table_tit1">
            <table>
              <thead>
              <th>合约</th>
              <th>合约名称</th>
              <th>止盈点</th>
              <th>止损点</th>
              </thead>
            </table>
          </div>
          <div class="table-wraper" ref="table_wraper1">
            <table>
              <tbody>
              <tr v-for="(item,index) in list" :key="index">
                <td>{{ item[4] }}{{ item[0] }}</td>
                <td>{{ item[1] }}</td>
                <td @click="showSpan($event)"><span>{{ item[2] }}</span><span><input type="number" min="0" onKeypress="javascript:if(event.keyCode == 46)event.returnValue = false;" @input="numAction($event)" @blur="blurAction($event)"></span></td>
                <td @click="showSpan($event)"><span>{{ item[3] }}</span><span><input type="number" min="0" onKeypress="javascript:if(event.keyCode == 46)event.returnValue = false;" @input="numAction($event)" @blur="blurAction($event)"></span></td>
              </tr>
              </tbody>
            </table>
          </div>
          <i-button type="primary" @click="sub_btn">确定</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Form, FormItem, Input, Button } from "iview";
import { mapGetters } from "vuex";
import * as trade from "../../../request/trade";
import md5 from "js-md5";
import $ from "jquery"
import axios from 'axios'
import db from '../../../../datastore'
export default {
  name: "ChangePw",
  components: {
    FormItem,
    IForm: Form,
    IInput: Input,
    IButton: Button
  },
  computed: {
    ...mapGetters(["cpwstu", "delogEve", "dbclickEve","productlist", "userinfo", "setList"])
  },
  watch: {
    setList(val) {
      this.list = val
      immediate: true
    },
    cpwstu(val) {
      // 如果成功修改了且input中的value未清除
      if (val && this.oldPw !== "" && this.newPw !== "") {
        this.oldPw = "";
        this.newPw = "";
        this.rNewPw = "";
      }
    },
    delogEve: {
      handler(newVal) {
        if (!newVal) {
          this.delogVal = false;
        } else {
          this.delogVal = true;
        }
      },
      immediate: true
    },
    dbclickEve: {
      handler(newVal) {
        if (!newVal) {
          this.dbVal = false;
        } else {
          this.dbVal = true;
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      yhid: '',
      tabActive: 1,
      delogVal: false, // 下单时弹出确认提示框
      dbVal: true, // 双击持仓单平仓
      oldPw: "", // 原密码
      newPw: "", // 新密码
      rNewPw: "", // 确认新密码
      list:[],
      paramlist: [] // 修改的合约list
    };
  },
  beforeMount() {
    // 初始化修改密码标记
    this.$store.dispatch("user/changePwStu", false);
  },
  mounted(){
    this.yhid = this.userinfo.uId
    // var data20 = this.productlist;
    // let list = []
    // for(let i in data20){
    //   let ARR = [];
    //   ARR.push(data20[i].MarketName);
    //   ARR.push(data20[i].Name);
    //   ARR.push(0);
    //   ARR.push(0);
    //   ARR.push(data20[i].ContractID)
    //   list.push(ARR);
    // }

    this.list = this.setList;
    // this.getList()
    
   
  },
  methods: {
    // 获取合约信息
    getList() {
      let nodeList = db
        .read()
        .get("trades.lineNode")
        .value();
      let phpzq = nodeList[2].url;
      let port = db.read().get("trades.port").value();
      axios.post(`${phpzq}${port}/index.php/findpoint`, {
        yh_id: this.yhid,
        hy_id: ''
      }).then(res => {
        if (res.data.length != 0) {
         
          // var data20 = this.productlist;
          let _list = this.list
          var listdate = res.data.data
          // console.log('listdate', listdate)
          var newList = [];
          for(let i in _list){
            for(let j = 0; j<listdate.length; j++){
              if(_list[i][4] == listdate[j].hy_id){
                // console.log(listdate[j])
                _list[i][2] = Number(listdate[j].ying_float)
                 _list[i][3] = Number(listdate[j].sun_float)
              }
            }
          }
          this.$store.dispatch('user/updateSetList', _list)
          this.list = _list
        }
        // this.list = res.data
        // var data20 = this.productlist;
        // if (res.data.length != 0) {
        //   var listdate = res.data
        //   var newList = [];
        //   var ARR;
        //   var flag;
        //   for(let i in data20){
        //     flag = true;
        //     for(let j = 0; j<listdate.length; j++){
        //       if(data20[i].MarketName == listdate[j][0]){
        //         newList.push(listdate[j])
        //         flag = false;
        //       }
        //     }
        //     if(flag){
        //       ARR = [];
        //       ARR.push(data20[i].MarketName);
        //       ARR.push(data20[i].Name);
        //       ARR.push(0);
        //       ARR.push(0);
        //       newList.push(ARR)
        //     }
        //   }
        //   this.list = newList;
        // }
      })
    },
    numAction(e){
      if(e.target.value.toString().split(".").length>1){
        e.target.value = 1;
      }else{
        e.target.value = e.target.value*1;
      }
    },
    showSpan(e){
      if(e.target.nodeName == "SPAN"){
        var value = $(e.target).text();
        $(e.target).hide().siblings().show().children().val(value).focus();
      }
    },
    blurAction(e){
      var value = $(e.target).val()*1;
      $(e.target).parent().hide().siblings().show().text(value);
      var index1 = $(e.target).parent().parent().parent().index(); // 第几行合约
      var index2 = $(e.target).parent().parent().index(); // 第几列
      this.list[index1][index2] = value
      // console.log('id', this.list[index1], this.list[index1][4])
      let _list = {
        hy_id: this.list[index1][4],
        ying: this.list[index1][2], // 止盈点
        sun: this.list[index1][3] // 止损点
      }
      // console.log('aaaaa',index1, index2, this.list[index1][2], this.list[index1][3])
      this.paramlist && this.paramlist.map((item, i) => {
        if(item.hy_id === _list.hy_id) {
          this.paramlist.splice(i, 1)
        }
      })
      this.paramlist.push(_list)
    },
    // 修改合约设置止盈点止损点
    updateList() {
      let nodeList = db
        .read()
        .get("trades.lineNode")
        .value();
      let phpzq = nodeList[2].url;
      let port = db.read().get("trades.port").value();
      axios.post(`${phpzq}${port}/index.php/point`, {
        yh_id: this.yhid,
        list: this.paramlist
      }).then(res => {
        this.$message({
          showClose: true,
          message: "设置成功!",
          type: 'success'
        });
        this.getList()
      })
    },
    sub_btn(){
      // localStorage.setListzq = JSON.stringify(this.list);
      // console.log('list', this.paramlist)
      this.updateList()
      
    },
    switchTab(i) {
      this.tabActive = i;
    },
    // 设置弹出
    delogSetting(deval) {
      console.log("下单弹出确认当前设置为：", deval);
      // 将当前的状态设置到store中，并存储到本地配置中
      this.$store.commit("panel/SET_DELOGEVE", deval);
      this.$db
        .read()
        .set("trades.delogEve", deval)
        .write();
    },
    // 设置双击下单
    dbClickSetting(dbval) {
      //console.log("双击持仓单平仓当前设置为：", dbval);
      // 将当前的状态设置到store中，并存储到本地配置中
      this.$store.commit("panel/SET_DBCLICKEVE", dbval);
      this.$db
        .read()
        .set("trades.dbclickEve", dbval)
        .write();
    },
    submitChangePw() {
      let that = this;
      // 先验证新密码和确认密码是否一致
      if (this.oldPw === "") {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.tipEmptyPw") + "!",
          type: 3
        });
        return;
      }
      if (this.newPw === "") {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.newNoEmp") + "!",
          type: 3
        });
        return;
      }
      if (this.rNewPw === "") {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.conNoEmp") + "!",
          type: 3
        });
        return;
      }
      if (this.newPw !== this.rNewPw) {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.inPwdTwice") + "!",
          type: 3
        });
        return;
      }

      this.$store.dispatch("panel/playTipsAudio", 6);
      this.$store.dispatch("bar/changeLoadings", {
        msg: this.$t("tip.loadeditpw"),
        status: true
      });
      //11;旧md5密码;新Md5密码;IP地址;
      trade.wsSend(
        `11;${md5(this.oldPw)};${md5(this.newPw)};${
          this.$store.getters.userip
        };`
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.change-pw {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 2px;
  .tabs-content {
    height: calc(100% - 30px);
    .pwd-form {
      width: 320px;
      padding: 16px 12px 0 24px;
      .form-submit {
        text-align: right;
      }
    }

    .order-set {
      padding: 16px 0 0 24px;
      width: 320px;
      .set-item {
        line-height: 32px;
        margin-bottom: 24px;
      }
    }
    .tab1 {
      height: 100%;
      border: 1px solid #b1bbc0;
      border-right: 0;
    }
    .tab2 {
      height: 100%;
      border: 1px solid #b1bbc0;
      border-right: 0;
    }
    .tab3 {
      height: 100%;
      border: 1px solid #b1bbc0;
      border-right: 0;
      .heyue-set{
        height: 100%;
        width: 100%;
        position: relative;
        float: left;
        .table-tit{
          position: absolute;
          top: 0;
          height: 30px;
          width: 100%;
          overflow: hidden;
          table{
            height: 30px;
            thead{
              width: 100%;
              height: 30px;
              color: #515a6e;
              th{
                height: 100%;
                text-align: center;
                line-height: 28px;
                min-width: 100px;
                border: 1px solid #b1bbc0;
              }
              th:nth-of-type(1){
                min-width: 100px;
              }
              th:last-child{
                width: 10px;
              }
            }
          }
        }
        .table-wraper{
          height: calc(100% - 70px);
          width: 100%;
          overflow: scroll;
          margin-top: 30px;
          table{
            height: auto;
            overflow: hidden;
            tbody{
              width: 100%;
              height: auto;
              tr{
                width: 100%;
                height: 30px;
                td{
                  min-width: 100px;
                  color: #515a6e;
                  text-align: center;
                  span{
                    display: block;
                    width: 90px;
                    height: 100%;
                    line-height: 25px;
                    input{
                      width: 90px;
                      height: 25px;
                      border: 1px solid #c0c0c0;
                    }
                  }
                  span:nth-of-type(2) {
                    display: none;
                  }
                }
                td:nth-of-type(1){
                  min-width: 100px;
                }
                .buy{
                  color: #ff3c39;
                }
                .sell{
                  color: #11901d;
                }
              }
              .action{
                background: #3a4663;
              }
            }
          }
        }
        button{
          margin-left: 150px;
          &:hover{
            opacity: 0.8;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
